<template>
  <view>
    <navBar v-if="isShowCustomNavBar" :navbarData.sync="navbarData"></navBar>
    <cmsParse :identifier.sync="cmsMemberCenter"></cmsParse>
    <view class="swiperBox">
      <view class="uni-padding-wrap">
        <view class="page-section swiper">
          <swiper class="swiper" :indicator-dots="false" :autoplay="false" :interval="interval" :duration="duration"
            :current="currentSwiper" @change="swiperChange" :data-tracktype="tracktype" previous-margin="70rpx"
            next-margin="70rpx">

            <!--V1内容-->
            <swiper-item class="swiperItem">
              <view class="tagIcon" v-if="memberLevelInfo.memberLevel==1">
                <image src="https://100000063-1252208446.cos.ap-shanghai.myqcloud.com/images/memberCard-level.png"
                  style="width:100%;" mode="widthFix"></image>
              </view>
              <view class="toCMSmemberRule" @click="toCMSmemberRule"></view>
              <view class="toLevelDescription" @click="toLevelDescription"></view>
              <view class="memberProgress">
                <view class="exxp-text" v-if="memberLevelInfo.memberLevel==1">
                  <!-- {{memberLevelInfo.point}}/{{memberLevelInfo.nextLevelPoint}}经验值 -->
				  {{memberLevelInfo.point}}经验值
                </view>
                <block v-if="memberLevelInfo.memberLevel==1">
                  <view class="lineBox">
                    <view class="line">
                      <view v-if="memberLevelInfo.percen > 0" class="lineHas" :style="getPercenHasStyle"></view>
                      <view class="act" :style="getPercenStyle">
                      </view>
                    </view>
                  </view>
                  <view class="upgradeLevel">还差<label
                      class="progressNumber">{{memberLevelInfo.upgradeLeft}}</label>经验值可升级至畅享会员</view>
                </block>
                <block v-else>
                  <view style="color: white;text-align: center;font-size: 12px; margin-top: 10px;">当前已高于该等级</view>
                </block>
              </view>
              <view class="tips" v-if="memberLevelInfo.memberLevel==1">长期有效</view>
              <view class="levelDetail" v-if="memberLevelInfo.memberLevel==1" @click="toLevelDescription">等级计算明细<label
                  class="macallan-icon mcl-youjiantou"></label></view>
              <image src="https://100000063-1252208446.file.myqcloud.com/images/miniprogram/0517_v1.png"
                mode="widthFix"></image>
            </swiper-item>

            <!--V2内容-->
            <swiper-item class="swiperItem">
              <view class="tagIcon" v-if="memberLevelInfo.memberLevel==2">
                <image src="https://100000063-1252208446.cos.ap-shanghai.myqcloud.com/images/memberCard-level.png"
                  style="width:100%;" mode="widthFix"></image>
              </view>
              <view class="toCMSmemberRule" @click="toCMSmemberRule"></view>
              <view class="toLevelDescription" @click="toLevelDescription"></view>
              <view class="memberProgress">
                <block v-if="memberLevelInfo.memberLevel==1">
                  <view class="exxp-text">{{memberLevelInfo.point}}/{{memberLevelInfo.nextLevelPoint}}经验值</view>
                  <view class="lineBox">
                    <view class="line">
                      <view v-if="memberLevelInfo.percen > 0" class="lineHas" :style="getPercenHasStyle"></view>
                      <view class="act" :style="getPercenStyle">
                      </view>
                    </view>
                  </view>
                  <view class="upgradeLevel">还差<label
                      class="progressNumber">{{memberLevelInfo.upgradeLeft}}</label>经验值可升级至畅享会员</view>
                </block>
                <block v-if="memberLevelInfo.memberLevel==2">
                  <view class="exxp-text">{{memberLevelInfo.point}}/{{memberLevelInfo.nextLevelPoint}}经验值</view>
                  <view class="lineBox">
                    <view class="line">
                      <view v-if="memberLevelInfo.percen > 0" class="lineHas" :style="getPercenHasStyle"></view>
                      <view class="act" :style="getPercenStyle">
                      </view>
                    </view>
                  </view>
                  <view class="upgradeLevel">还差<label
                      class="progressNumber">{{memberLevelInfo.upgradeLeft}}</label>经验值可升级至尊享会员</view>
                </block>
                <block v-if="memberLevelInfo.memberLevel==3">
                  <view style="color: white;text-align: center;font-size: 12px; margin-top: 10px;">当前已高于该等级</view>
                </block>
              </view>
              <view class="tips" v-if="memberLevelInfo.memberLevel==2">{{getTips}}</view>
              <view class="levelDetail" v-if="memberLevelInfo.memberLevel==2" @click="toLevelDescription">等级计算明细<label
                  class="macallan-icon mcl-youjiantou"></label></view>
              <image src="https://100000063-1252208446.file.myqcloud.com/images/miniprogram/0517_v2.png"
                mode="widthFix"></image>
            </swiper-item>

            <!--V3内容-->
            <swiper-item class="swiperItem">
              <view class="tagIcon" v-if="memberLevelInfo.memberLevel==3">
                <image src="https://100000063-1252208446.cos.ap-shanghai.myqcloud.com/images/memberCard-level.png"
                  style="width:100%;" mode="widthFix"></image>
              </view>
              <view class="toCMSmemberRule" @click="toCMSmemberRule"></view>
              <view class="toLevelDescription" @click="toLevelDescription"></view>
              <view class="memberProgress">
                <block v-if="memberLevelInfo.memberLevel==1">
                  <view style="color:#ccc;text-align:center;margin-top:24rpx;font-size: 22rpx;">近12个月经验值满 10000 升级
                  </view>
                </block>
                <block v-if="memberLevelInfo.memberLevel==2">

                  <view class="exxp-text">{{memberLevelInfo.point}}/{{memberLevelInfo.nextLevelPoint}}经验值</view>
                  <view class="lineBox">
                    <view class="line">
                      <view v-if="memberLevelInfo.percen > 0" class="lineHas" :style="getPercenHasStyle"></view>
                      <view class="act" :style="getPercenStyle">
                      </view>
                    </view>
                  </view>
                  <view class="upgradeLevel">还差<label
                      class="progressNumber">{{memberLevelInfo.upgradeLeft}}</label>经验值可升级尊享会员</view>
                </block>
                <block v-if="memberLevelInfo.memberLevel==3">
                  <view class="exxp-text">{{memberLevelInfo.point}}/{{memberLevelInfo.nextLevelPoint}}经验值</view>
                  <view class="lineBox">
                    <view class="line">
                      <view v-if="memberLevelInfo.percen > 0" class="lineHas" :style="getPercenHasStyle"></view>
                      <view class="act" :style="getPercenStyle"></view>
                    </view>
                  </view>
                  <view v-if="memberLevelInfo.c_keep_level_amount <= 0" class="upgradeLevel">恭喜，您已保级成功</view>
                  <view v-if="memberLevelInfo.c_keep_level_amount && memberLevelInfo.c_keep_level_amount > 0" class="upgradeLevel">还差<label
                      class="progressNumber">{{memberLevelInfo.c_keep_level_amount / 1 == null ? '0' : memberLevelInfo.c_keep_level_amount }}</label>经验值可保级成功
                  </view>
                </block>
              </view>
              <view class="tips" v-if="memberLevelInfo.memberLevel==3">{{getTips}}</view>
              <view class="levelDetail" v-if="memberLevelInfo.memberLevel==3" @click="toLevelDescription">等级计算明细<label
                  class="macallan-icon mcl-youjiantou"></label></view>
              <image src="https://100000063-1252208446.file.myqcloud.com/images/miniprogram/0517_v3.png"
                mode="widthFix"></image>
            </swiper-item>
          </swiper>
        </view>
      </view>

    </view>
    <view class="welfareBtn">
      <view class="icon_dsj"></view>
      <view class="title">会员专属权益</view>
      <view class="btnBox">
        <view class="btnItem" v-for="(item, index) in welfareBtn" :key="index">
          <view class="iconImg" @click="showTopView(index)">
            <image
              :src="index == 3 && currentSwiper > 0 ? item.imgUrl : index == 4 && currentSwiper == 2 ? item.imgUrl : index <= 2 ? item.imgUrl : item.imgUrl_Invalid"
              mode="widthFix"></image>
          </view>
          <view class="iconName" @click="showTopView(index)">
            {{item.imgName}}
          </view>
        </view>
      </view>
    </view>

    <view class="topView" v-if="membership">
      <view class="content">
        <view class="macallan-icon mcl-guanbi1" @click="closeBox"></view>
        <view class="icon">
          <view class="bg">
            <image
              :src="welfareBtnIndex == 3 && currentSwiper > 0 ? welfareBtn[welfareBtnIndex].imgUrl : welfareBtnIndex == 4 && currentSwiper == 2 ? welfareBtn[welfareBtnIndex].imgUrl : welfareBtnIndex <= 2 ? welfareBtn[welfareBtnIndex].imgUrl : welfareBtn[welfareBtnIndex].imgUrl_Invalid"
              mode="widthFix"></image>
          </view>
        </view>
        <view class="title">{{welfareBtn[welfareBtnIndex].imgName}}</view>
        <block
          v-if="(welfareBtnIndex==3 && memberLevelInfo.memberLevel < 2) || (welfareBtnIndex==4 && memberLevelInfo.memberLevel < 3)">
          <view style="text-align: center;font-size:22rpx;margin-top: 10rpx;color:#ccc;">当前等级不可享受此权益</view>
        </block>
        <view class="text"><rich-text style="line-height: 1.38;"
            :nodes="welfareBtn[welfareBtnIndex].imgText"></rich-text></view>
      </view>
    </view>
    <view class="cmsPage">
      <wxParseCMS  :preview.sync="preview" :identifier.sync="userLevel[currentSwiper].cmsId">
      </wxParseCMS>

    </view>

  </view>
</template>
<script module="filterChecked" lang="wxs" src="../../utils/filter.wxs"></script>
<script>
  import api from '@/api/api';
  import tip from '@/utils/tip';
  import NavBar from '../../components/common/navbar';
  import TabBar from '../../components/common/tabbar';
  import cmsParse from '@/components/wxparse/wxparse';
  import WxParse from '@/components/wxparse/wxparse';
  import {
    SEL_CLASS_CODE,
    SEL_ACTIVE_CODE,
    SYSTEM_INFO,
    USER_INFO,
    CUSTOMER_INFO,
    CUSTOMER_HOTFIX,
    CART_KEY,
    MERCHANT_INFO
  } from '@/utils/constant';

  export default {
    config: {
      navigationStyle: 'custom',
      navigationBarTitleText: ''
    },
    components: {
      navBar: NavBar,
      tabBar: TabBar,
      wxParseCMS: WxParse,
      cmsParse,
    },

    data() {
      return {
        isShowCustomNavBar: true,
        nowPages: '',
        cmsMemberCenter: 'cms/memberTopBanner',
        membership: false,

        // 轮播
        indicatorDots: true,
        autoplay: true,
        interval: 2000,
        duration: 500,
        navbarData: {
          showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
          navbarTitle: '会员中心', //导航栏 中间的标题
        },
        wxParseCMS: '',
        userLevel: [{
            "url": "https://100000063-1252208446.file.myqcloud.com/images/miniprogram/0517_v1.png",
            "data": "",
            "cmsId": "swiper_p1_cms",
            "minPoint": 0,
            "maxpoint": 5000,
          },
          {
            "url": "https://100000063-1252208446.file.myqcloud.com/images/miniprogram/0517_v2.png",
            "data": "",
            "cmsId": "swiper_p2_cms",
            "minPoint": 5000,
            "maxpoint": 10000,
          },
          {
            "url": "https://100000063-1252208446.file.myqcloud.com/images/miniprogram/0517_v3.png",
            "data": "",
            "cmsId": "swiper_p3_cms"
          },
        ],
        currentSwiper: 0,
        welfareBtnIndex: 0,
        tracktype: ["心享会员", "畅享会员", "尊享会员"],
        welfareBtn: [{
            "imgUrl": "https://100000063-1252208446.cos.ap-shanghai.myqcloud.com/images/miniprogram/%20images/welfareBtn_1.png",
            "imgName": "专享产品",
            "imgText": "不同等级会员享有不同指定产品的专享购买权（产品种类及所适用会员等级可能不时调整，以购买时相关页面实际显示为准），升级可解锁更多产品购买权（产品不定期上架，数量有限，售罄即止）。",
          },
          {
            "imgUrl": "https://100000063-1252208446.cos.ap-shanghai.myqcloud.com/images/miniprogram/%20images/welfareBtn_2.png",
            "imgName": "专享福利",
            "imgText": "不定期会员福利（不同级别会员的福利存在差异，具体会员福利以相应页面中展示的信息为准）",
          },
          {
            "imgUrl": "https://100000063-1252208446.cos.ap-shanghai.myqcloud.com/images/miniprogram/%20images/welfareBtn_3.png",
            "imgName": "专属顾问",
            "imgText": "在线专属客服，服务时间：周一至周日<br/> 9:00-22:00；贵宾热线：4000980599，服务时间：周一至周日 9:00-18:00。",

          },
          {
            "imgUrl": "https://100000063-1252208446.cos.ap-shanghai.myqcloud.com/images/miniprogram/%20images/welfareBtn_4.png",
            "imgUrl_Invalid": "https://100000063-1252208446.cos.ap-shanghai.myqcloud.com/images/miniprogram/%20images/welfareBtn_4_1.png",
            "imgName": "品牌特邀",
            "imgText": "会员将有机会受邀或优先受邀出席品牌特邀的线上/线下活动（具体活动安排以相应活动页面所展示的信息为准）",
          },
          {
            "imgUrl": "https://100000063-1252208446.cos.ap-shanghai.myqcloud.com/images/miniprogram/%20images/welfareBtn_5.png",
            "imgUrl_Invalid": "https://100000063-1252208446.cos.ap-shanghai.myqcloud.com/images/miniprogram/%20images/welfareBtn_5_1.png",
            "imgName": "生日惊喜",
            "imgText": "尊享会员完善个人生日信息后，可在生日当月之内联系客服申领 MACALLAN 精美生日礼一份，每位尊享会员每年限领一次（前往“我的﹣个人信息”中完善信息，生日信息一旦提交无法修改，请您务必填写正确信息）",
          },
        ],
        memberDetails: {},
        memberLevelInfo: { //会员积分信息
          memberLevel: 1,
          memberLevelName: "心享会员",
          point: 0,
          upgradeLeft: 5000, //会员升级剩余金额
          c_keep_level_amount: 0,
          nextLevel: '畅享会员',
          nextLevelPoint: 5000,
          percen: 0,
          memberLevelExpirationDate: null, // 会员到期时间
          nowPages: '',
        },
      };
    },
    mounted() {

    },
    computed: {
      getPercenStyle() {
        return 'left:' + this.memberLevelInfo.percen + '%';
      },
      getPercenHasStyle() {
        return 'width:' + this.memberLevelInfo.percen + '%';
      },
      getTips() {
        let tips = '长期有效'
        if (this.memberLevelInfo.memberLevelExpirationDate) {
          var date = new Date(this.memberLevelInfo.memberLevelExpirationDate);
          const y = date.getFullYear();
          const month = date.getMonth() + 1 > 9 ? date.getMonth() + 1 : '0' + parseInt(date.getMonth() + 1);
          const day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
          tips = '有效期至' + y + '-' + month + '-' + day;
        }
        return tips;
      }
    },
    onLoad: async function(option) {
      let that = this;
      this.wxParseCMS = 'swiper_p1_cms';
      let pages = getCurrentPages();
      var currPage = pages[pages.length - 1];
      this.nowPages = currPage.route;
      for (let i = 0; i < this.userLevel.length; i++) {
        this.getCMSPageInfo(this.userLevel[i].cmsId, i)
      }
      let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
      if (!!customerInfo.jwt) {
        that.getMemberDetail(customerInfo.jwt);
      } else {
        that.$commonFunction.commonLoginNew().then(function(res) {
          customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        });
      }
    },
    onShow() {
      let that = this;
      that.$commonSensors.commonPageView('MemberEquityPageView')
      getApp().cl_tracker.track('mini_program_view', {
        path: this.nowPages,
        pageName: '会员中心',
      })
    },
    methods: {
      // 展示弹框
      showTopView(index) {
        let that = this
        this.welfareBtnIndex = index
        that.membership = true
        this.$commonSensors.popupEvent('PopupExposure', {'popup_type' : '会员权益', 'popup_name': '会员专属权益弹窗'})
        //查看会员专属权益埋点
        this.$commonSensors.commonPageClick('MemberEquityPageClick', this.welfareBtn[index].imgName)
        let track = this.tracktype[this.currentSwiper]
        let clTrackPrams = {
          'c_view_lv': '查看的会员等级值:' + track,
          'c_view_benefit': this.welfareBtn[index].imgName
        }
        getApp().commonClTrack('c_ebmp_view_memberbenefit', clTrackPrams)
      },

      // 关闭弹框
      closeBox() {
        let that = this
        that.membership = false
        this.$commonSensors.popupEvent('PopupClick', {'popup_type' : '会员权益', 'popup_name': '会员专属权益弹窗', 'button_name': '关闭'})
      },
      toCMSmemberRule() {
        this.$commonSensors.commonPageClick('MemberEquityPageClick', '会员规则')
        uni.navigateTo({
          url: '/pages/cms/page?identifier=cms/memberRule'
        });
      },
      toLevelDescription() {
        uni.navigateTo({
          url: '/pages/customer/levelDetailList'
        });
      },
      swiperChange(e) {
        this.currentSwiper = e.detail.current
        this.tracktype = e.target.dataset.tracktype
      },
      /* CMS配置页面 */
      getCMSPageInfo: async function(identifier, i) {
        let that = this;
        let merchantInfo = uni.getStorageSync(MERCHANT_INFO) || getApp().globalData.merchantInfo
        let mt = '1.0';
        const json = await api.getConfigDetail({
          method: 'POST',
          query: {
            identifier: identifier,
            merchantId: merchantInfo.cloudMerchantId,
            storeId: merchantInfo.cloudMerchantStoreId,
            mt: mt
          }
        });
        if (json.data.code === 1000 && json.data.data !== null) {
          let configData = json.data.data;
          let cmsConfigData = {};
          if (this.preview) {
            cmsConfigData = JSON.parse(configData.preview);
          } else {
            cmsConfigData = JSON.parse(configData.content);
            let contents = configData.contents;
            for (let index in contents) {
              let startTime = contents[index].startTime;
              startTime = startTime.substring(0, 19);
              startTime = startTime.replace(/-/g, '/');
              let startTimeTimestamp = new Date(startTime).getTime();
              if (startTimeTimestamp <= new Date().getTime()) {
                cmsConfigData = JSON.parse(contents[index].content);
                break;
              }
            }
          }
          let CMSItembanner = cmsConfigData
          this.userLevel[i].data = cmsConfigData
          // debugger
        }
      },
      /**
       * 判断是否是会员
       *
       * @param jwt
       * @return {Promise<void>}
       */
      getMemberDetail: async function(jwt) {
        let that = this;
        let customerInfo = uni.getStorageSync(CUSTOMER_INFO);
        const memberDetailsResult = await api.getMemberDetails({
          header: {
            jwt: customerInfo.jwt || jwt
          }
        });
        if (memberDetailsResult.code == 1000) {
          const phoneNumberReg = /^1\d{10}$/;
          if(!phoneNumberReg.test(memberDetailsResult.data.mobile)){
            // 非大陆手机号按照非会员对待,重新入会
            uni.removeStorageSync('memberDetails');
            that.memberDetails = {};
            return;
          }
          that.memberDetails = memberDetailsResult.data;
 
          if (that.memberDetails.isActive == 'Inactive') {} else {
            if (that.memberDetails.memberLevel) {
              that.memberLevelInfo.memberLevelName = that.memberDetails.memberLevel.levelName;
              that.memberLevelInfo.memberLevel = that.memberDetails.level ? that.memberDetails.level + 1 : 1;
              that.currentSwiper = that.memberLevelInfo.memberLevel - 1;
              if (that.memberLevelInfo.memberLevel == 3) {

              } else if (that.memberLevelInfo.memberLevel == 2) {
                that.memberLevelInfo.nextLevel = '尊享会员';
              } else {
                that.memberLevelInfo.nextLevel = '畅享会员';
              }
            }
            that.memberLevelInfo.point = that.memberDetails.c_exp_12M ? parseFloat(that.memberDetails.c_exp_12M) : 0;
            that.memberLevelInfo.upgradeLeft = that.memberDetails.upgradeLeft ? that.memberDetails.upgradeLeft : 5000;
            that.memberLevelInfo.c_keep_level_amount = that.memberDetails.c_keep_level_amount ? that.memberDetails.c_keep_level_amount :
              0;
            // that.memberLevelInfo.memberLevel = 1;
            // that.memberLevelInfo.point = 1000;
            // that.memberLevelInfo.upgradeLeft = 4000;
            // if (that.memberLevelInfo.memberLevel == 3) {
            //   that.memberLevelInfo.nextLevelPoint = 10000;
            // } else {
            //   that.memberLevelInfo.nextLevelPoint = that.memberLevelInfo.point + that.memberLevelInfo.upgradeLeft;
            // }
            if (that.memberLevelInfo.memberLevel == 1) {
              that.memberLevelInfo.nextLevelPoint = 5000;
            } else {
              that.memberLevelInfo.nextLevelPoint = 10000;
              // that.memberLevelInfo.nextLevelPoint = that.memberLevelInfo.point + that.memberLevelInfo.upgradeLeft;
            }
            const num = (that.memberLevelInfo.point / that.memberLevelInfo.nextLevelPoint).toFixed(2) * 100;
            that.memberLevelInfo.percen = num >= 100 ? 100 : num;
            that.memberLevelInfo.memberLevelExpirationDate = that.memberDetails.memberLevelExpirationDate;
          }
        } else {

        }
      },
    }
  };
</script>

<style lang="less">
  .color-sub,
  .price {
    display: none;
  }

  .shopitem-vertical {
    padding-bottom: 120rpx !important;
  }

  swiper {
    height: 336rpx;
  }

  .swiper {
    background-color: #f6f5f3;
    padding-top: 30rpx;

    .swiperItem {
      height: 100%;
      display: flex;
      justify-content: center;

      .toCMSmemberRule {
        position: absolute;
        top: 20rpx;
        right: 20rpx;
        width: 120rpx;
        height: 36rpx;
      }

      image {
        width: 95%;
      }
    }
  }

  .swiper_p1 {
    background-color: #007AFF;
  }

  .swiper_p2 {
    background-color: #c30;
  }

  .swiper_p3 {
    background-color: #09BB07;
  }

  .welfareBtn {
    box-shadow: 1px -18px 20px 0px rgba(51, 51, 51, 0.3);
    background: rgba(255, 255, 255, 0.1);
    position: relative;

    .title {
      text-align: center;
      font-size: 32rpx;
      padding-top: 50rpx;
      font-weight: bold;
    }

    .btnBox {
      display: flex;
      margin: 20rpx 30rpx 20rpx;
      justify-content: space-between;
      padding: 30rpx 24rpx 38rpx;

      .iconImg {
        width: 110rpx;

        image {
          width: 100%;
        }
      }

      .iconName {
        font-size: 24rpx;
        text-align: center;
      }
    }
  }

  .icon_dsj {
    border-left: 18rpx solid transparent;
    border-right: 18rpx solid transparent;
    border-top: 18rpx solid #4c4c4c;
    position: absolute;
    left: 50%;
    top: 0;
    margin-left: -30rpx;
    display: none;
  }

  .topView {
    position: fixed;
    background: rgba(0, 0, 0, 0.7);
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;

    .content {
      background-color: #fff;
      width: 75%;
      position: relative;
      padding-bottom: 50rpx;

      .mcl-guanbi1 {
        position: absolute;
        right: 20rpx;
        top: 20rpx;
        font-size: 36rpx;
        z-index: 1;
      }

      .icon {
        display: flex;
        position: relative;

        .bg {
          background-color: #fff;
          width: 132rpx;
          height: 130rpx;
          position: absolute;
          left: 50%;
          top: -50%;
          margin: -60rpx -72rpx;
          z-index: 1;
          border-radius: 100%;
        }

        image {
          width: 138rpx;
          margin: -1rpx 0 0 -2rpx;
        }
      }

      .title {
        padding-top: 100rpx;
        text-align: center;
        font-size: 30rpx;
      }

      .text {
        padding: 20rpx 30rpx;
        text-align: center;
      }
    }
  }

  .toLevelDescription {
    position: absolute;
    right: 20rpx;
    bottom: 0;
    width: 200rpx;
    height: 36rpx;
  }

  .levelDetail {
    position: absolute;
    bottom: 20rpx;
    color: #ccc;
    right: 40rpx;
    font-size: 20rpx;
    display: flex;

    .mcl-youjiantou {
      font-size: 23rpx;
      margin: 4rpx 0 0 6rpx;
    }
  }

  .tips {
    position: absolute;
    color: #ccc;
    left: 40rpx;
    bottom: 20rpx;
    font-size: 20rpx;
  }

  .progressNumber {
    color: #d8ccb6;
    font-size: 26rpx;
    margin: 0 8rpx;
    font-weight: bold;
  }

  .memberProgress {
    position: absolute;
    top: 206rpx;
    width: 80%;
    padding: 0 40rpx;

    .upgradeLevel {
      color: #ccc;
      text-align: center;
      font-size: 22rpx;
      margin-top: 4rpx;
    }

    .lineBox {
      display: flex;
      justify-content: space-between;
      padding: 0 8rpx;
      align-items: center;

      label {
        font-size: 20rpx;
      }

      .line {
        width: 100%;
        margin: 0 16rpx;
        background-color: #fff;
        height: 4rpx;
        position: relative;

        .lineHas {
          background-color: #d6c79c;
          height: 4rpx;
          position: absolute;
        }

        .act {
          width: 16rpx;
          height: 16rpx;
          background-color: #d6c79c;
          position: absolute;
          top: -6rpx;
          border-radius: 100%;

          .triangle-up {
            width: 0;
            height: 0;
            border-left: 16rpx solid transparent;
            border-right: 16rpx solid transparent;
            border-bottom: 20rpx solid #808080;
            position: absolute;
            left: -8rpx;
            bottom: -32rpx;

          }
        }
      }
    }
  }

  .tagIcon {
    position: absolute;
    left: 16rpx;
    top: 0;
    width: 96rpx;
  }

  .tipGrowthText {
    color: #ccc;
    margin: 0 30rpx 20rpx;
    font-size: 20rpx;
  }

  .exxp-text {
    color: #ccc;
    font-size: 18rpx;
    text-align: center;
    margin-bottom: 10rpx;
  }
</style>
